1
<!DOCTYPE html>
<html>
<head>
    <style>
        .error { color: red; }
    </style>
</head>
<body>
    <form id="registerForm">
        <div>
            <label>用户名:</label>
            <input type="text" id="username">
            <span class="error" id="usernameError"></span>
        </div>
        <div>
            <label>邮箱:</label>
            <input type="email" id="email">
            <span class="error" id="emailError"></span>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" id="password">
            <span class="error" id="passwordError"></span>
        </div>
        <button type="submit">注册</button>
    </form>

    <script>
        const form = document.getElementById('registerForm');
        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;

            // 验证用户名
            const username = document.getElementById('username').value;
            if (username.length < 3) {
                document.getElementById('usernameError').textContent = '用户名至少3个字符';
                isValid = false;
            } else {
                document.getElementById('usernameError').textContent = '';
            }

            // 验证邮箱
            const email = document.getElementById('email').value;
            if (!emailRegex.test(email)) {
                document.getElementById('emailError').textContent = '邮箱格式不正确';
                isValid = false;
            } else {
                document.getElementById('emailError').textContent = '';
            }

            // 验证密码
            const password = document.getElementById('password').value;
            if (password.length < 6) {
                document.getElementById('passwordError').textContent = '密码至少6个字符';
                isValid = false;
            } else {
                document.getElementById('passwordError').textContent = '';
            }

            if (isValid) {
                alert('注册成功！');
                form.reset();
            }
        });
    </script>
</body>
</html>
2
<!DOCTYPE html>
<html>
<body>
    <div>
        <h1 id="count">0</h1>
        <button onclick="changeCount(-1)">-</button>
        <button onclick="changeCount(1)">+</button>
    </div>

    <script>
        let count = 0;
        const countElement = document.getElementById('count');

        function changeCount(amount) {
            count += amount;
            countElement.textContent = count;
        }
    </script>
</body>
</html>
3
<!DOCTYPE html>
<html>
<body>
    <input type="number" id="guessInput">
    <button onclick="checkGuess()">猜</button>
    <p id="hint"></p >

    <script>
        let targetNumber = Math.floor(Math.random() * 100) + 1;

        function checkGuess() {
            const userGuess = parseInt(document.getElementById('guessInput').value);
            const hintElement = document.getElementById('hint');

            if (userGuess === targetNumber) {
                hintElement.textContent = '恭喜你猜对了！';
                targetNumber = Math.floor(Math.random() * 100) + 1; // 重置数字
            } else if (userGuess < targetNumber) {
                hintElement.textContent = '猜小了！';
            } else {
                hintElement.textContent = '猜大了！';
            }
        }
    </script>
</body>
</html>
4
<!DOCTYPE html>
<html>
<body>
    <h1 id="clock"></h1>

    <script>
        function updateClock() {
            const now = new Date();
            const timeString = now.toLocaleTimeString();
            document.getElementById('clock').textContent = timeString;
        }

        // 初始更新并设置定时器
        updateClock();
        setInterval(updateClock, 1000);
    </script>
</body>
</html>
5
<!DOCTYPE html>
<html>
<body>
    <input type="text" id="taskInput" placeholder="输入新任务">
    <button onclick="addTask()">添加</button>
    <ul id="taskList"></ul>

    <script>
        function addTask() {
            const input = document.getElementById('taskInput');
            const taskText = input.value.trim();
            
            if (taskText) {
                const li = document.createElement('li');
                li.innerHTML = `
                    ${taskText}
                    <button onclick="this.parentElement.remove()">删除</button>
                `;
                document.getElementById('taskList').appendChild(li);
                input.value = '';
            }
        }
    </script>
</body>
</html>

